<template>
	<div id="shangxin">
		<div class="header">
			<span class="left" @click="tojump(fenlei)"></span>
			<span class="text1">上新馆</span>
			<span class=" text2">排序</span>
			<span class="down"></span>
		</div>
		<div class="content">
			<ul>
				<li>
					<div class="img">
						<span>预售</span>
					</div>
					<p>荷包口红•豇豆红</p>
					<div class="priceBox">
						<span class="text1-price">￥199.00</span>
						<span class="text2-pirce">上新价</span>
					</div>
				</li>
				<li>
					<div class="img">
						<span>预售</span>
					</div>
					<p>荷包口红•豇豆红</p>
					<div class="priceBox">
						<span class="text1-price">￥199.00</span>
						<span class="text2-pirce">上新价</span>
					</div>
				</li>
				<li>
					<div class="img">
						<span>预售</span>
					</div>
					<p>荷包口红•豇豆红</p>
					<div class="priceBox">
						<span class="text1-price">￥199.00</span>
						<span class="text2-pirce">上新价</span>
					</div>
				</li>
				<li>
					<div class="img">
						<span>预售</span>
					</div>
					<p>荷包口红•豇豆红</p>
					<div class="priceBox">
						<span class="text1-price">￥199.00</span>
						<span class="text2-pirce">上新价</span>
					</div>
				</li>
				<li>
					<div class="img">
						<span>预售</span>
					</div>
					<p>荷包口红•豇豆红</p>
					<div class="priceBox">
						<span class="text1-price">￥199.00</span>
						<span class="text2-pirce">上新价</span>
					</div>
				</li>
				<li>
					<div class="img">
						<span>预售</span>
					</div>
					<p>荷包口红•豇豆红</p>
					<div class="priceBox">
						<span class="text1-price">￥199.00</span>
						<span class="text2-pirce">上新价</span>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default{
		name:"shangxin",
		data(){
			return{
				fenlei:'fenlei/meizhuang'
			}
		},
		methods:{
			tojump(fenlei){
				this.$router.push({path:`/${fenlei}`,})
			}
			// tojump(shouye) {
			// 	this.$router.push({path:`/${shouye}`,
			// 	})
			// }
		}
	}
</script>

<style>
	#shangxin{
		background: #FAF8F8;
	}
	#shangxin .header{
		display: flex;
		height: 0.88rem;
		background: #C30D23;
	}
	
	#shangxin .header .left{
		width: 0.2rem;
		height: 0.2rem;
		display: inline-block;
		background-image: url(../../../assets/img/left-icon.png);
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		margin-left: 0.12rem;
		margin-top: 0.55rem;
	}
	
	#shangxin .header .text1{
		font-size: 0.20rem;
		font-weight: bold;
		color: #FFFCFC;
		opacity: 1;
		margin-left: 1.26rem;
		margin-top: 0.51rem;
	}
	
	#shangxin .header .text2{
		font-size: 0.14rem;
		color: #FFFCFC;
		opacity: 1;
		margin-left: 0.93rem;
		margin-top: 0.58rem;
	}
	#shangxin .header .down{
		width: 0.2rem;
		height: 0.2rem;
		display: inline-block;
		background-image: url(../../../assets/img/down-icon.png);
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		margin-left: 0.01rem;
		margin-top: 0.57rem;
	}
	
	#shangxin .content ul{
		display: flex;
		flex-wrap: wrap;
		margin: 0.10rem 0 0 0.07rem;
	}
	
	#shangxin .content ul li{
		display: flex;
		flex-direction: column;
		/* text-align: center; */
		margin: 0.06rem 0 0 0.13rem;
		background: #FFFFFF;
	}
	
	#shangxin .content ul li .img{
		width: 1.61rem;
		height: 1.61rem;
		background-image: url(../../../assets/img/kouhong2.png);
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		position: relative;
	}
	
	#shangxin .content ul li .img span{
		display: inline-block;
		position: absolute;
		width: 1.61rem;
		height: 0.3rem;
		line-height: 0.3rem;
		font-size: 0.12rem;
		color: #FFFCFC;
		background: #C30D23;
		opacity: 1;
		bottom: 0;
		left: 0;
		text-align: center;
	}
	
	#shangxin .content ul li p{
		font-size: 0.14rem;
		opacity: 1;
		margin: 0.15rem 0 0 0.08rem;
	}
	
	#shangxin .content ul li .priceBox{
		display: flex;
		margin: 0.1rem 0;
	}
	
	#shangxin .content ul li .priceBox .text1-price{
		font-size: 0.16rem;
		font-weight: bold;
		color: #C30D23;
		opacity: 1;
	} 
	
	#shangxin .content ul li .priceBox .text2-pirce{
		display: inline-block;
		height: 0.11rem;
		font-size: 0.08rem;
		color: #C30D23;
		opacity: 1;
		border:  0.01rem solid #C30D23;
		margin: 0.05rem 0 0 0.05rem;
	} 
</style>
